import DocCardBox from "@/components/doc-card"
import React from "react"
import { Demo, demoJson } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "default",
        hash: "sth-l-demo1",
        coms: [<Demo key={0} size="small" />],
        comsJson: [demoJson('size="small"')]
        // desc: [{ text: "sth_1_1_1" }]
    },
    {
        titleKey: "disabled",
        hash: "sth-l-demo2",
        coms: [<Demo key={0} disabled={true} />],
        comsJson: [demoJson("disabled")]
        // desc: [{ text: "sth_2_1_1" }]
    }
]

const rightList = [
    {
        titleKey: "readonly",
        hash: "sth-r-demo1",
        coms: [<Demo key={0} readOnly={true} />],
        comsJson: [demoJson("readOnly")]
        // desc: [{ text: "sth_3_1_1" }]
    }
]

function SwitchDoc() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "SwitchProps",
            data: [
                {
                    schema: "defaultValue",
                    type: "boolean",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("defaultValue")
                },
                {
                    schema: "loading",
                    type: "boolean",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("loading")
                },
                {
                    schema: "disabled",
                    type: "boolean",
                    defaultValue: "false",
                    isRequire: t("no"),
                    desc: t("disabled")
                },
                {
                    schema: "readOnly",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("readonly")
                },
                {
                    schema: "value",
                    type: "string | number | boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("value")
                },
                {
                    schema: "onClick",
                    type: "DivMouseType",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("click_event")
                },
                {
                    schema: "onTouchStart",
                    type: "DivTouchType",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("touch_event")
                },
                {
                    schema: "onChange",
                    type: "(e) => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("change_event")
                },
                {
                    schema: "classNames",
                    type: "RadioClassName",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("classnames")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Switch" desc="switchDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default SwitchDoc
